<template>
  <div>
    <ZgButton @click="toSelect">{{ title }}</ZgButton>
    <ZgDrawer v-model="visible">
      <ZgNewPage
        ref="page"
        :isRadio="isRadio"
        :title="title"
        :extraHeight="300"
        :uniqueName="formCode"
        :pageOpt="pageOpt"
        :batchBtns="[]"
        :dataBtns="[]"
        :headers="backHeaders"
        :conditions="conditions"
        @search="onSearch"
        @filter="onFilter"
        @header="mergeHeader"
      >
        <template slot="columns">
          <a-table-column
            v-for="(h,i) in headers"
            :key="`column${i}`"
            :width="h.width===0 ? 'auto' : h.width"
            :title="h.label">
            <template slot-scope="record">
              <div v-if="headers[i].type==='富文本'">
              </div>
              <div v-else-if="headers[i].type==='多行文本'">
                <a-popover>
                  <template #content>
                    {{ record[h.code] }}
                  </template>
                  <span>
                    {{ record[h.code].length>10?(record[h.code].substring(0,10)+'...'):record[h.code] }}
                  </span>
                </a-popover>
              </div>
              <div v-else-if="headers[i].type==='图片'">
                <ZgImgHolder :width="48" :height="48" :src="record[h.code]"/>
              </div>
              <div v-else-if="headers[i].type==='字典'">
                <ZgDicHolder :code="record[h.code]" :parentCode="headers[i].extra.字典类型"/>
              </div>
              <div v-else-if="headers[i].type==='多选'">
                <ZgDicHolder
                  v-for="(x,j) in record[h.code].split(',')"
                  :key="`${h.code}_mlt_${j}`"
                  :code="x"
                  :parentCode="headers[i].extra.字典类型"/>
              </div>
              <div v-else-if="['单选框','开关'].includes(headers[i].type)">
                <a-tag>{{ (record[h.code]===1||record[h.code]===true)?'是':'否' }}</a-tag>
              </div>
              <div v-else>
                {{ record[h.code] }}
              </div>
            </template>
          </a-table-column>
        </template>
      </ZgNewPage>
      <div class="wfull flx-c pt30" style="border-top:dashed 1px #999;">
        <ZgButton size="large" icon="check" @click="onSelect()">提交选择结果</ZgButton>
      </div>
    </ZgDrawer>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '选择数据'
    },
    formCode: {
      type: String,
      default: 'form_test'
    },
    isRadio: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false,
      pageOpt: {
        showConditionBtn: true,
        showHeaderConfig: true,
        showDataCheck: true
      },
      headers: [],
      backHeaders: [],
      conditions: []
    }
  },
  mounted () {
    this.searchColumn()
    this.searchCondition()
  },
  watch: {
    formCode () {
      this.searchColumn()
      this.searchCondition()
    }
  },
  methods: {
    // 分页数据查询
    search () {
      this.$refs.page.search()
    },
    // 查询条件
    searchCondition () {
      this.$http.get('/zg-autoform/zxb/condition/view', {
        formCode: this.formCode
      }, data => {
        this.conditions = data.map(t => {
          return {
            code: t.alias,
            compType: t.columnType,
            label: t.label,
            extra: JSON.parse(t.extra),
            defaultVal: ['整数', '浮点数'].includes(t.columnType) ? 0 : ''
          }
        })
      })
    },
    // 查询表头信息
    searchColumn () {
      this.$http.get('/zg-autoform/zxb/form/column', {
        formCode: this.formCode
      }, data => {
        this.headers = data.map(t => {
          return {
            code: t.code,
            label: t.name,
            type: t.compType,
            extra: JSON.parse(t.extra),
            width: 0,
            isShow: true,
            sort: t.sort
          }
        })
        this.backHeaders = JSON.parse(JSON.stringify(this.headers))
      })
    },
    onSearch (param) {
      // 读取用户个性化表头数据
      const diyHeaderKey = this.currentUser.username + '_diyHeader_' + this.formCode
      const diyHeaders = localStorage.getItem(diyHeaderKey)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
      // 加载数据
      this.$http.post('/zg-autoform/zxb/table/data/page/' + this.formCode, param, data => {
        this.$refs.page.endSearch(
          {
            total: data[0],
            list: data[1].map(t => {
              const result = {
                key: t.ID
              }
              for (const key in t) {
                result[key.toLowerCase()] = t[key]
              }
              return result
            })
          }
        )
      })
    },
    onFilter (f, param) {
    },
    mergeHeader (newHeaders) {
      if (!newHeaders) {
        return
      }
      this.headers = newHeaders.filter(t => {
        return t.isShow
      }).sort((a, b) => {
        return a.sort - b.sort
      })
    },
    toSelect () {
      this.visible = true
      setTimeout(() => {
        this.$refs.page.ids = []
      }, 200)
    },
    onSelect () {
      this.$refs.page.checkIds(ids => {
        this.visible = false
        this.$emit('ok', this.$refs.page.list.filter(t => {
          return ids.includes(t.id)
        }))
      }, '确定选择这些数据么')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
